package com.app.mycomposedemo.ui.components


import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.app.mycomposedemo.ui.theme.Blue100
import com.app.mycomposedemo.ui.theme.Blue700
import com.google.accompanist.systemuicontroller.rememberSystemUiController

@Composable
fun TopAppBarComp(modifier: Modifier = Modifier, content: @Composable () -> Unit) {

    // 设置系统状态栏的颜色为 透明
    val systemUiController = rememberSystemUiController();
    LaunchedEffect(key1 = Unit) {
        systemUiController.setStatusBarColor(Color.Transparent, darkIcons = false)
    }

    val appBarHeight = 56.dp

    Row(
        modifier = Modifier
            .background(Brush.linearGradient(listOf(Blue700, Blue100)))
            .fillMaxWidth()
            .systemBarsPadding()
            .height(appBarHeight)
            .then(modifier),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        content()
    }
}

@Preview(showSystemUi = true)
@Composable
fun TopAppBarCompPreview() {
    TopAppBarComp() {
        Text("标题")
    }
}

